<!doctype html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<html class="no-js">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="index">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="/assets/css/amazeui.css"/>
    <link rel="stylesheet" href="/assets/css/admin.css">
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/app.js"></script>
    <style type="text/css">
        .waaibiankuang {
            position: absolute;
            top: 0%;
            left: 0%;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999
        }

        .neibiankuang {
            position: absolute;
            left: 35%;
            border-radius: 8px;
            width: 30%;
            background-color: #fff;
        }

        #editUserInfo:hover {
            cursor: pointer;
        }

        .edit_name {
            width: 80px;
            float: left;
            display: inline-block;
            margin-bottom: .5rem;
            margin-left: 18px;
            line-height: 38px;
        }

        .edit_input {
            float: left;
            display: block;
            width: 60%;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #495057;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn {
            cursor: pointer;
            -webkit-appearance: button;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            float: right;
            user-select: none;
            border: 1px solid transparent;
            padding: .375rem .75rem;
            font-size: 1rem;
            margin-right: 20px;
            line-height: 1.5;
            border-radius: .25rem;
            transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        }

        .edit_btn_close {
            margin-right: 20px;

        }

        .edit_btn_commit {
            color: #fff;
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
</head>
<body>
<div th:insert="~{common :: #header}"></div>
<div class="am-cf admin-main">
    <div th:insert="~{common ::#sidebar}"></div>
    <div class=" admin-content">
        <div class="daohang">
            <ul>
                <li>
                    <button type="button" class="am-btn am-btn-default am-radius am-btn-xs"/>
                    首页
                </li>

            </ul>
        </div>

        <div class="admin-biaogelist">
            <div class="listbiaoti am-cf">
                <ul class="am-icon-users"> 问题管理</ul>
                <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">会员管理</a></dl>
                <dl>
                    <button id="addDoubt" type="button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                        手动添加问题
                    </button>
                </dl>
                <!--这里打开的是新页面-->
            </div>
            <form class="am-form am-g">
                <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                    <thead>
                        <tr class="am-success">

                            <th class="table-author am-hide-sm-only">id</th>
                            <th class="table-author am-hide-sm-only">问题</th>
                            <th class="table-author am-hide-sm-only">答案</th>
                            <th class="table-author am-hide-sm-only">状态</th>
                            <th class="table-date am-hide-sm-only">创建时间</th>
                            <th class="table-date am-hide-sm-only">更新时间</th>
                            <th width="130px" class="table-set">操作</th>
                        </tr>
                    </thead>
                    <tbody id="userInfo">
                    <tr th:each="doubt:${doubtList}">

                        <td class="am-hide-sm-only" th:text="${doubt.id}"></td>
                        <td class="am-hide-sm-only" th:text="${doubt.question}"></td>
                        <td class="am-hide-sm-only" th:text="${doubt.answer}"></td>
                        <td class="am-hide-sm-only" th:if="${doubt.status ==1}">有效问题</td>
                        <td class="am-hide-sm-only" th:if="${doubt.status ==2}">无效问题</td>
                        <td class="am-hide-sm-only" th:text="${#dates.format(doubt.createTime,'yyyy-MM-dd HH:mm')}"></td>
                        <td class="am-hide-sm-only" th:text="${#dates.format(doubt.updateTime,'yyyy-MM-dd HH:mm')}"></td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <div class="am-btn am-btn-default am-btn-xs am-text-success am-round">
                                        <span id="nouse" class="am-icon-search" title="没有用，就是为了好看加上的"></span>
                                    </div>
                                    <input type="hidden" id="doubtId" th:value="${doubt.id}">
                                    <input type="hidden" id="question" th:value="${doubt.question}"  />
                                    <input type="hidden" id="answer"  th:value="${doubt.answer}" />
                                    <input type="hidden" id="status" th:value="${doubt.status}"  />
                                    <div id="editInformation"
                                         class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"
                                         title="修改信息">
                                        <span id="editor" class="am-icon-pencil-square-o"></span>
                                    </div>
                                    <div id="deleteInformation"
                                         class="am-btn am-btn-default am-btn-xs am-text-danger am-round" title="删除信息">
                                        <span id="delete" class="am-icon-trash-o"></span>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <ul class="am-pagination am-fr">
                    <li><a href="">«</a></li>
                    <li><a href=""></a></li>
                    <li><a href="">»</a></li>
                </ul>
                <div class="am-btn-group am-btn-group-xs"></div>
                <hr/>
                <p>注：.....</p>
            </form>

            <div class="foods">
                <dl>
                    <a href="" title="返回头部" class="am-icon-btn am-icon-arrow-up"></a>
                </dl>
            </div>
        </div>
    </div>
</div>


<!--修改用户信息-->
<div>
    <div id="editUserInfo" class="bg-model waaibiankuang">

        <div class='content neibiankuang'>
            <div style=" display: flex;align-items: flex-start;justify-content: space-between;padding: 1rem;border-bottom: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <h4 style="margin-bottom: 0; line-height: 1.5;font-size: 1.5rem;" id="gridSystemModalLabel1">编辑问题信息</h4>
            </div>
            <input type="hidden" id="editDoubtId">
            <div style="margin: 10px;height: 42px">
                <label class="edit_name">问题：</label>
                <input type="text" style="font-size: 14px;width: 266px; height: 40px;"
                       class="edit_input"
                       id="editQuestion" name="editQuestion">
            </div>

            <div style="margin: 10px;height: 150px">
                <label class="edit_name">答案：</label>
                <textarea id="editAnswer" style="width: 266px;height: 150px;"></textarea>
            </div>

            <div style="margin: 10px;height: 42px">
                <label class="edit_name">问题状态：</label>
                <select name="editUserStatus" style="height: 40px;font-size: 14px;  border-radius: 3px; width: 266px;" id="editStatus">
                    <option value="1">有效问题</option>
                    <option value="2">无效问题</option>
                </select>
            </div>


            <div style="height: 20px; justify-content: space-between;padding: 1rem;border-top: 1px solid #e9ecef;border-top-left-radius: .3rem;border-top-right-radius: .3rem;">
                <button type="button" id="editUserInfoSubmit" class="edit_btn edit_btn_commit" data-dismiss="modal">
                    修改
                </button>
                <button type="button" class="edit_btn edit_btn_close" id="editUserInfoClose">关闭</button>
            </div>
            　　
        </div>
    </div>
</div>


<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/assets/js/polyfill/rem.min.js"></script>
<script src="/assets/js/polyfill/respond.min.js"></script>
<script src="/assets/js/amazeui.legacy.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/amazeui.js"></script>
<!--<![endif]-->


<script type="application/javascript">

    $(document).ready(function () {
        // 获取到事件
        $("#userInfo").on('click', 'span[id^="nouse"]', function () {
            alert("点下其他的试试^_^");
        });
        // 获取到修改事件
        $("#userInfo").on('click', '#editInformation', function () {
            $("#editUserInfo").fadeTo(300, 1);
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
            var question = $(this).prevAll("#question").val();
            var answer = $(this).prevAll("#answer").val();
            var status = $(this).prevAll("#status").val();
            var doubtId = $(this).prevAll("#doubtId").val();
            // alert(doubtId)
            $("#editQuestion").val(question);
            $("#editAnswer").val(answer);
            $("#editStatus").val(status);
            $("#editDoubtId").val(doubtId);


        });
        // 修改事件关闭模态框
        $("#editUserInfoClose").click(function () {
            $("#editUserInfo").hide();
            //显示窗体的滚动条
            $("body").css({"overflow": "visible"});
        });
        // 提交修改信息
        $("#editUserInfoSubmit").click(function () {
            var doubtId = $("#editDoubtId").val();
            // alert(doubtId);
            var editQuestion = $("#editQuestion").val();
            // alert(editQuestion);
            var editAnswer = $("#editAnswer").val();
            // alert(editAnswer);
            var editStatus = $("#editStatus").val();
            // alert(editStatus);

            $.ajax({
                url: '/doubt/editDoubt',
                dateType: 'JSON',
                type: 'POST',
                data: {
                    id: doubtId,
                    question:editQuestion,
                    answer:editAnswer,
                    status:editStatus
                },
                success: function (result) {
                    console.log(result  )
                    if (result.code != 200) {
                        alert("更新失败！");
                        return false;
                    } else {
                        window.location.reload();
                    }
                }
            })
        });
        // 获取到删除事件
        $("#userInfo").on('click', '#deleteInformation', function () {
            if (!confirm("确定删除？")) {
                return false;
            }
            var doubtId = $(this).prevAll("#doubtId").val();
            // alert(doubtId)
            $.ajax({
                url:'/doubt/deleteById?doubtId=' + doubtId,
                success:function (result) {
                    if (result.code == 200) {
                        window.location.reload();
                    } else {
                        alert("删除失败！");
                        return;
                    }
                }
            })
        });
        // 添加问题
        $("#addDoubt").click(function () {
            $("#editUserInfo").fadeTo(300, 1);
            //隐藏窗体的滚动条
            $("body").css({"overflow": "hidden"});
        })



    });


</script>


</body>
</html>